<template>
<el-container style="height: 970px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
  <el-menu default-active="1">
    <div v-if="this.tf" style="width: 100%;height: 100px;background: darkgray">
      <img style="width: 60px;height: 60px;border-radius: 30px;margin-left: 20px;margin-top: 18px"
           src="http://127.0.0.1:8080/infor/getImg" alt="丢失">
   <h3 style="position: relative;left: 50%;top: -80%;color: white">{{this.message.name}}</h3>
      <div class="bigOnline"><div v-if="this.online" style="display: flex"><div class="tfOnline" style="background: lawngreen;"></div>在线</div>
        <div v-else style="display: flex"><div class="tfOnline" style="background: darkred;"></div>离线</div></div>

    </div>

    <div v-else @click="perfect"
         style="width: 100%;height: 100px;text-align: center;color: gray;background: aliceblue;font-size: large;line-height: 100px"
    >点击完善个人信息</div>
    <router-link to="/home">
      <el-menu-item index="1" >首页</el-menu-item>
    </router-link>

    <router-link to="/EmployeeFiles">
      <el-menu-item index="2">员工档案</el-menu-item
      ></router-link>

    <router-link to="/kaoqing">
      <el-menu-item index="3" >员工考勤</el-menu-item>
    </router-link>
    <router-link to="/personnelTransfer">
      <el-menu-item index="4">人事调动</el-menu-item>
    </router-link>

  </el-menu>
</el-aside>

<el-container>
  <el-header style="text-align: right; font-size: 12px">
      <el-button @click="goAway" type="warning" icon="el-icon-switch-button">退出登录</el-button>
  </el-header>

  <el-main>
    <router-view></router-view>

<!--    <el-table :data="tableData">-->
<!--      <el-table-column prop="date" label="日期" width="140">-->
<!--      </el-table-column>-->
<!--      <el-table-column prop="name" label="姓名" width="120">-->
<!--      </el-table-column>-->
<!--      <el-table-column prop="address" label="地址">-->
<!--      </el-table-column>-->
<!--    </el-table>-->
  </el-main>
</el-container>
</el-container>
</template>

<style>
.bigOnline{
  position: relative;
  left: 45%;top: -85%;
  display: flex;
}
.tfOnline{
  width: 20px;
  height: 20px;
  border-radius: 20px;
  margin-right: 5px;

}
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.router-link-active {
  text-decoration: none;
  color: yellow;
}
a{
  text-decoration: none;
  color: black;
}
</style>

<script>
import axios from "axios";

export default {
  created() {
    this.Axios()
    this.goHome()
  },
  mounted() {
    //监听是否有网络
    window.addEventListener('online',this.updateOnlineStatus)//从无网络到有网络
    window.addEventListener("offline",this.updateOnlineStatus)//从有到无
    //监听窗口关闭
    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
    window.addEventListener('unload', e => this.unloadHandler(e))
  },
  destroyed() {
    //不用了销毁
    window.removeEventListener('online', this.updateOnlineStatus)
    window.removeEventListener('offline',this.updateOnlineStatus)
    window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
    window.removeEventListener('unload', e => this.unloadHandler(e))
  },
  data() {
    return {
      tf:false,
      message:"",
      online:navigator.onLine,
      _beforeUnload_time:"",
      _gap_time:""

    }
  },
  methods:{
    goHome(){
      this.$router.push("/home")
    },
    goAway(){
     this.$router.push("/login")
    },
    //获取关闭或者刷新页面的时间
    beforeunloadHandler(){
      this._beforeUnload_time=new Date().getTime();
    },
    unloadHandler(){
      this._gap_time =new Date().getTime()-this._beforeUnload_time;
      if (this._gap_time<5){
        this.$cookies.remove("call1")
      }
    },

    //判断是否有网络
    updateOnlineStatus(e) {
      const { type } = e;
      this.onLine = type == 'online';
      console.log("网络由异常")
    },
    //跳转到完善个人资料页面
    perfect(){
      this.$router.push("/perfectInfor")
    },
    //判断是否有存在你的信息
    Axios(){
      axios({
        url:"/infor/myInfor",
        methods: 'get'
      }).then(rsp =>{
        if (rsp.data.call1 == null){
          this.tf = false
        }else {
          this.message = rsp.data
          console.log(this.message)
          this.tf = true
        }

      })
    }
  }
};
</script>
